<!doctype html>
<html>
@include('top.title')
<body>
<style>
    /*body{background: #fff}*/
    ul, li, p, img {
        margin: 0;
        padding: 0
    }

    .lightBox {
        margin: 30px auto;
        width: 100%;
        position: relative;
        height: 80px;
        padding: 10px 0;
    }

    .lightBox ul {
        width: 1000px;
        margin-top: -25px;
    }

    .lightBox li {
        width: 140px;
        margin: 5px 16px 5px -14px;;
        float: left;
        display: inline;
        padding-left: 25px
    }

    .lightBox li img {
        height: 80px;
        width: 140px;
        cursor: pointer;
        width: 160px;
        height: 160px;
    }

    /**弹出层样式***/
    .mask {
        height: 100%;
        width: 100%;
        filter: alpha(opacity:0);
        opacity: 0;
        background: #000;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0
    }

    .popup {
        background: #fff url(./images/loading.gif) no-repeat center;
        border: 10px solid #fff;
        position: absolute;
        z-index: 2;;
        overflow: hidden;
        width: 320px;
        height: 240px
    }

    .popup img {
        height: auto;
        width: auto;
    }

    .btn {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 50%;
        cursor: pointer;
    }

    .prev {
        left: 0;
        background: no-repeat 0 50px;
    }

    /*url(./images/lightbox-btn-prev.gif)*/
    .next {
        background: no-repeat right 50px;
    }

    /*url(./images/lightbox-btn-next.gif)*/
    .popupBottom {
        position: relative;
        z-index: 3;
        margin-top: 8px
    }

    .popupTitle, .popupClose {
        float: right;
    }

    .popupTitle {
        width: 100%;
        line-height: 18px;
        color: #543424;
        font-family: Arial;
        font-size: 12px;
        margin-right: -81px;
        width: 100%;
        _margin: -22px 0 0 0
    }

    .popupTitleTxt {
        float: left;
        margin-right: 126px
    }

    .popupClose {
        margin-right: 15px;
        height: 22px;
        width: 66px;
        background: url(./images/lightbox-btn-close.gif) no-repeat;
        cursor: pointer;
        position: relative;
        z-index: 4
    }
</style>
@include('top.header')
@if(!empty(session('success')))
    <div id="tishi"
         style="background-color: #caeaca;position:absolute; margin:840px 2px 4px 1580px;width:300px;height: 24px;padding:10px;border-radius: 50px;">
        <span style="text-align: center;display:block;"> 提示信息：{{session('success')}}</span>
    </div>
@endif
<div class="mainContent">
    @include('top.menu')
    <form action="/photos" method="get">
        {{ csrf_field() }}
        <select class="leixing" name="type" id="">
            <option value="">全部</option>
            @foreach($type as $k=>$v)
                <option value="{{$v['type_id']}}">{{$v['name']}}</option>
            @endforeach
        </select>
        <button type="submit" class="shangchuang">搜一搜</button>
    </form>
    <div class="lightBox">
        <ul style="width: 1660px">
            @foreach($list as $k=>$v)
                <li><img src="{{$v['url']}}" alt="" _title='{{$v['content']}}'></li>
                {{--<span style="color:#a6a6a6;">发表时间:{{$v['add_time']}}</span>--}}
                {{--<a href="/">阅读全文</a><a href="/">评论</a><a href="/">转载</a>--}}
            @endforeach
        </ul>
    </div>
</div>
<div class="pages" style="text-align:center;margin:0 auto;width: 100%;margin-left:-60px">
    {{$list->links()}}
</div>
@include('top.footer')
</body>
</html>
<script>
    /**
     * Created by Administrator on 2018/4/20.
     */
    (function (win) {
        var lightBox = {};
        lightBox.init = function (elem) {
            this.elem = this.$$('lightBox')[0];
            this.aImages = this.elem.getElementsByTagName('img');
            this.index = this.maxH = 0;
            this.len = this.aImages.length;
            this.showPopup();
        };
        //============显示弹出层
        lightBox.showPopup = function () {
            var self = this,
                    img = this.aImages;
            for (var i = 0; i < this.len; i++) {
                img[i].index = i;
                img[i].onclick = function () {
                    self.maxH = 0;
                    self.index = this.index;
                    self.createPopup(this.src, this.getAttribute('_title'));
                }
            }
        };
        //===========class获取元素
        //params  s 类名
        //params  t 节点名
        //params  p  父辈以上节点 dom对象
        lightBox.$$ = function (s, t, p) {
            var aElement = (p || document).getElementsByTagName(t || '*'),
                    reg = new RegExp('(^|\\s)' + s + '(\\s|$)'),
                    aResult = [];
            for (var i = 0; i < aElement.length; i++) {
                reg.test(aElement[i].className) && aResult.push(aElement[i]);
            }
            ;
            return aResult;
        };
        //==============创建弹出层展示
        //params   src  图片路径
        //params title  显示文字
        lightBox.createPopup = function (src, title) {
            var oPopup = document.createElement('div');//弹出层外框
            var oMask = document.createElement('div');//遮罩
            var oPrev = document.createElement('div');//上按钮
            var oNext = document.createElement('div');//下按钮
            var oBottom = document.createElement('div');//底部盒子
            var oTitle = document.createElement('div');//底部文字盒子
            var oTitleTxt = document.createElement('div');
            var oClose = document.createElement('div');//关闭
            var oImg = document.createElement('img');//图片

            oMask.className = 'mask';
            oPopup.className = 'popup';
            oPrev.className = 'prev btn';
            oNext.className = 'next btn';
            oBottom.className = 'popupBottom';
            oTitle.className = 'popupTitle';
            oTitleTxt.className = 'popupTitleTxt';
            oClose.className = 'popupClose';

            oTitleTxt.innerHTML = title || '';

            var vw = document.documentElement.clientWidth,
                    vh = document.documentElement.clientHeight;
            oPopup.style.margin = '0';
            oPopup.style.left = (vw - 320) / 2 + 'px';
            oPopup.style.top = (vh - 240) / 2 + 'px';

            oTitle.appendChild(oTitleTxt);
            oBottom.appendChild(oClose);
            oBottom.appendChild(oTitle);
            oPopup.appendChild(oPrev);
            oPopup.appendChild(oNext);
            oPopup.appendChild(oImg);
            oPopup.appendChild(oBottom);
            document.body.appendChild(oMask);
            document.body.appendChild(oPopup);

            var self = this;
            oImg.onload = function () {
                var w = this.width, docH = self.getFullHeight();
                var oldw = self.css(oPopup, 'width'), oldh = self.css(oPopup, 'height');
                oBottom.style.width = w + 'px';
                oPopup.style.height = 'auto';
                oPopup.style.width = 'auto';
                oPopup.style.opacity = 0;
                oPopup.style.filter = 'alpha(opacity:0)';
                oMask.style.height = docH + 'px';
                var h = oPopup.clientHeight;
                w = oPopup.clientWidth;
                oPopup.style.height = oldh;
                oPopup.style.width = oldw;
                oBottom.style.display = oImg.style.display = 'none';
                self.move(oMask, {opacity: 60}, 5);
                self.move(oPopup, {
                    opacity: 100,
                    height: h,
                    width: w,
                    left: parseInt((vw - w) / 2),
                    top: parseInt((vh - h) / 2)
                }, 5, function () {
                    oBottom.style.display = oImg.style.display = 'block';
                });
            };
            oImg.src = src;

            this.prev = oPrev;
            this.next = oNext;
            this.close = oClose;
            this.img = oImg;
            this.txt = oTitleTxt;
            this.p = oPopup;


            this.mask = oMask;
            this.nexts();
            this.prevs();
            this.stopPropagation();
            this.closes();
            this.mouseWheels();
        };
        //==============鼠标滚轮
        lightBox.mouseWheels = function () {
            this.addEvent(document, 'mousewheel', wheel);
            this.addEvent(document, 'DOMMouseScroll', wheel);
            var self = this;

            function wheel(e) {
                self.maxH = Math.max(self.p.clientHeight, self.maxH);
                var ev = window.event || e, flag = true,
                        h = self.p.clientHeight, w = self.p.clientWidth,
                        l = self.p.offsetLeft, t = self.p.offsetTop;
                //FF detail 往上小于0,往下大于0;
                //IE wheelDelta 往上大于0,往下小于0
                flag = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;

                switch (flag) {
                        //往下
                    case true:
                        if (h < 150 || w < 200)return;
                        h -= 20;
                        w -= 20;
                        l += 10;
                        t += 10;
                        break;
                    default :  //往上
                        if (h < self.maxH) {
                            h += 20;
                            w += 20;
                            l -= 10;
                            t -= 10;
                        }
                }
                ;

                self.css(self.p, 'height', h);
                self.css(self.p, 'left', l);
                self.css(self.p, 'width', w);
                self.css(self.p, 'top', t);
                ev.preventDefault && ev.preventDefault();
                return false;
            }
        };
        //==============阻止冒泡
        lightBox.stopPropagation = function () {
            this.elem.onclick = this.p.onclick = function (ev) {
                var e = window.event || ev;
                e.stoppropagation ? e.stopPropagation() : (e.cancelBubble = true);
            }
        };
        //==============绑定事件
        //params  o dom对象
        //params  type 事件类型
        //params  fn   事件函数
        lightBox.addEvent = function (o, type, fn) {
            return o.addEventListener ? o.addEventListener(type, fn, false) : o.attachEvent('on' + type, fn);
        };
        //==============解除事件绑定
        lightBox.removeEvent = function (o, type, fn) {
            return o.detachEvent ? o.detachEvent('on' + type, fn) : o.removeEventListener(type, fn);
        };
        //==============关闭
        lightBox.closes = function () {
            var self = this;
            document.onclick = this.close.onclick = function () {
                self.move(self.mask, {opacity: 0}, 5, function () {
                    document.body.removeChild(self.mask);
                });
//                document.body.removeChild(self.p);
                location.reload();
            };
        };
        //==============点击上一张
        lightBox.prevs = function () {
            var self = this;
            this.prev.onclick = function () {
                var index = --self.index;
                self.maxH = 0;
                if (index < 0) {
                    index = self.index = self.len - 1;
                }
                self.img.src = self.aImages[index].src;
                self.txt.innerHTML = self.aImages[index].getAttribute('_title');
            }
        };
        //==============点击下一张
        lightBox.nexts = function () {
            var self = this;
            this.next.onclick = function () {
                var index = ++self.index;
                self.maxH = 0;
                if (index >= self.len) {
                    index = self.index = 0;
                }
                self.img.src = self.aImages[index].src;
                self.txt.innerHTML = self.aImages[index].getAttribute('_title');
            }
        };
        //=============缓冲运动
        //params  o    dom对象
        //params  json 散列表
        //params  fx   Boolean值
        //params  fn   回调函数,可选
        lightBox.move = function (o, json, fx, fn) {
            var self = this;
            o.timer && clearInterval(o.timer);
            o.timer = setInterval(function () {
                var bStop = true;
                var cur = 0;
                for (var attr in json) {
                    cur = attr == 'opacity' ? parseInt(parseFloat(self.css(o, attr)).toFixed(2) * 100) : parseInt(self.css(o, attr));
                    var speed = (json[attr] - cur) / fx;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if (attr == 'opacity') {
                        o.style.filter = 'alpha(opacity:' + (speed + cur) + ')';
                        o.style.opacity = (speed + cur) / 100;
                    } else {
                        o.style[attr] = (cur + speed) + 'px';
                    }
                    if (cur != json[attr]) {
                        bStop = false;
                    }
                    if (bStop) {
                        clearInterval(o.timer);
                        (typeof fn == 'function') && fn();
                    }
                }
            }, 30)
        };
        //=============获取元素样式
        //params  o    dom对象
        //params  attr 属性
        lightBox.css = function (o, attr, val) {
            if (arguments.length == 2) {
                return o.currentStyle ? o.currentStyle[attr] : getComputedStyle(o, false)[attr];
            }
            else {
                o.style[attr] = val + 'px';
            }

        };
        //=============获取页面高度
        lightBox.getFullHeight = function () {
            var sh = document.body.scrollHeight,
                    ch = document.documentElement.clientHeight;
            return sh > ch ? sh : ch;
        };
        win.lightBox = lightBox;
    })(window);
    lightBox.init();
</script>